<template>
  <div class="combination_box">
    <div class="top">
      <div class="list_title">权益推荐</div>
      <div class="refresh" @click="handleRefresh">
        <img src="/static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/img/refresh.svg" alt="">
        换一批</div>
    </div>
    <div class="list_content">
      <div class="bottom_box_list"  :style="{'background-image': `url(${mainUrl(item)})`}"
      v-for="item in ListArr" :key="item.ID" @click="goDetaiks(item)" >
        <div class="list_top">
          <!-- <div class="list_top_img" :style="{backgroundImage: mainUrl(item)}">
            <img :src="mainUrl(item)" alt="">
          </div> -->
          <div class="list_top_text">
            <div>
              <el-tooltip class="item" effect="dark" :content="item.NAME" placement="top-start">
                <div class="text">
                  {{ item.NAME }}
                </div>
              </el-tooltip>
              <div v-if="item.FlagList">
                <span class="label" v-for="ind in item.FlagListName.split(',')" :key="ind">{{ ind }}</span>
              </div>
            </div>
            <div class="price">
              <div class="left">已售: {{ item.SoldQuantity }}份</div>
              <div class="right">￥<span>{{ item.CostPrice }}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "combination", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      octopus: this.$parent.octopus,
      ListArr: [],
      pageSize: 1,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    mainUrl(item) {
      try { return item.MainPicturePath ? JSON.parse(item.MainPicturePath)[0].url : "" }
      catch(e) { return "" }
    },
    getList() {
      let o = this
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 731,
          cellData: [
            { name: "CompanyID" },	// 权益所属公司
            { name: "CostPrice" },	// 平台价格
            { name: "FlagList" },	// 权益标签
            { name: "FlagListName" },	// 权益标签 中文
            { name: "ID" },	// 权益的ID
            { name: "InventoryQuantity" },	// 库存
            { name: "MainPicturePath" },	// 主图
            { name: "Name" },	// 权益名称（标题）
            { name: "SalePrice" },	// 市场价格
            { name: "SecondaryPicturePath" },	// 副图
            { name: "SoldQuantity" },	// 已售数量
            {name: "TypeID"},	// TypeID
          ],
          pageData: {
            index: this.pageSize,
            rowSize: 3
          },
        },
        (data) => {
          if (data.status.code == 200) {
            this.pageSize += 1
            if(this.pageSize > data.content.pageData.totalPages - 1) {
                this.pageSize = 1
            }
            o.ListArr = data.content.queryData
          } else {
            o.octopus.tips.error(data);
          }
        });
    },
    goDetaiks(item) {
      let str = item.TypeID == 2 ? 'ZH':'DG'
      this.octopus.router.jump(`/MMS/AIGC/RightsDetails/List?rightsType=SC&type=${str}&rightsId=${item.ID}&CompanyID=${item.CompanyID}&reload=1`)
    },

    // 换一批
    handleRefresh() {
      this.getList()
    },
  },
}
</script>
<style scoped>
.combination_box {
  height: calc(100vh - 7.5rem)
}
.combination_box .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.combination_box .top .refresh {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: #FF8347;
  cursor: pointer;
}
.combination_box .top .refresh img {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 1rem;
}

.combination_box .list_title {
  font-size: 2rem;
  font-weight: bold;
}

.combination_box .list_content {
  width: 29.5rem;
  height: 100%;
  display: flex;
  margin-top: 1.5rem;
  flex-direction: column;
  justify-content: space-between;
}

.combination_box .bottom_box_list {
  width: 100%;
  height: 20.7rem;
  cursor: pointer;
  border-radius: 2.5rem;
  box-shadow: 2px 1px 9px 0px rgba(180, 171, 206, 0.25);
  box-sizing: border-box;
  background-size: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 3.2rem;
}

.combination_box .bottom_box_list {
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}

.combination_box .bottom_box_list .list_top {
  display: flex;
  justify-content: space-between;
}

.combination_box .bottom_box_list .list_top .list_top_img {
  width: 11.5rem;
  height: 11.5rem;
  border-radius: 2rem;
  overflow: hidden;
}

.combination_box .bottom_box_list .list_top .list_top_img img {
  width: 100%;
  height: 100%;
}

.combination_box .bottom_box_list .list_top .list_top_text {
  width: 100%;
  height: 7.5rem;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,0.7), 0px 4px 4px 0px rgba(151,151,151,0.25);
  border-radius: 0px 0px 17px 17px;
  padding: .2rem 1.1rem .6rem 1.3rem;
}

.combination_box .bottom_box_list .list_bottom {
  width: 100%;
}

.combination_box .bottom_box_list .list_top .list_top_text .text {
  font-size: 1.7rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
  color: #fff;
}

.combination_box .mast_go {
  font-size: 1.4rem;
  /* background-color: #F87338; */
  color: #fff;
  padding: .2rem .5rem;
  vertical-align: middle;
  margin-right: .8rem;
  border-radius: 3px;
  background: linear-gradient(to right, #ED5757, #FF9E67);
}

.combination_box .bottom_box_list .list_top .list_top_text .label {
  font-size: 1.1rem;
  color: #E8E8E8;
  border: 1px solid #E8E8E8;
  padding: 0 3px;
  margin-right: .3rem;
}

.combination_box .bottom_box_list .list_top .list_top_text .price {
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.combination_box .bottom_box_list .list_top .list_top_text .price .left {
  color: #fff;
}

.combination_box .bottom_box_list .list_top .list_top_text .price .right {
  font-weight: 700;
  /* color: #F87338; */
  color: #fff;
}
.combination_box .bottom_box_list .list_top .list_top_text .price .right span {
  font-size: 2.3rem;
}


.combination_box .bottom_box_list .list_bottom {
  display: flex;
  color: #827070;
  font-size: 1.5rem;
}

.combination_box .bottom_box_list .list_bottom>div:first-child {
  margin-right: 2rem;
}
</style>